<template>
    <div class="gs-gw-details">
        <div v-if="$route.query.type=='S04'">
            <section class="tableBox">
                <div class="title">
                    实时当前值
                </div>
                <div>流量</div>
                <div>{{detailsList.flowInstantValue}}</div>
                <div>压力</div>
                <div>{{detailsList.pressPressureValue}}</div>
            </section>
            <section class="chartBtn">
                <div :class="{ active: isActive1==1 }" @click="changeActive1(1)">流量</div>
                <div :class="{ active: isActive1==2 }" @click="changeActive1(2)">压力</div>
            </section>
            <section class="chartBtn">
                <div :class="{ active: isActive2==1 }" @click="changeActive2(1)">今日/昨日</div>
                <div :class="{ active: isActive2==2 }" @click="changeActive2(2)">本周</div>
                <div :class="{ active: isActive2==3 }" @click="changeActive2(3)">本月</div>
            </section>
        </div>
        <div v-if="$route.query.type=='S05'">
            <section class="tableBox">
                <div class="title">
                    实时当前值
                </div>
                <div>压力</div>
                <div>{{detailsList.pressPressureValue}}</div>
            </section>
            <section class="chartBtn">
                <div :class="{ active: isActive2==1 }" @click="changeActive2(1)">今日/昨日</div>
                <div :class="{ active: isActive2==2 }" @click="changeActive2(2)">本周</div>
                <div :class="{ active: isActive2==3 }" @click="changeActive2(3)">本月</div>
            </section>
        </div>
        <div v-if="$route.query.type=='S06'">
            <section class="tableBox">
                <div class="title">
                    实时当前值
                </div>
                <div>余氯</div>
                <div></div>
                <div>浊度</div>
                <div></div>
                <div>PH</div>
                <div></div>
                <div></div>
                <div></div>
            </section>
            <section class="chartBtn">
                <div :class="{ active: isActive1==1 }" @click="changeActive1(1)">余氯</div>
                <div :class="{ active: isActive1==2 }" @click="changeActive1(2)">浊度</div>
                <div :class="{ active: isActive1==3 }" @click="changeActive1(3)">PH</div>
            </section>
            <section class="chartBtn">
                <div :class="{ active: isActive2==1 }" @click="changeActive2(1)">今日/昨日</div>
                <div :class="{ active: isActive2==2 }" @click="changeActive2(2)">本周</div>
                <div :class="{ active: isActive2==3 }" @click="changeActive2(3)">本月</div>
            </section>
        </div>
        <section>
            <div ref="echartContainer" style="width:100%; height:300px"></div>
        </section>
        <section class="map">
            <div class="mapBox" @click="toMap"></div>
            <!-- <a class="mapBox" href="/static/map.html"></a> -->
            <div style="width:95%;height:200px;border:#ccc solid 1px;border-radius:10px;margin:0 auto" id="dituContent"></div>
        </section>
    </div>
</template>

<script>
export default {
    data() {
        var myChart;

        return {
            isActive1: 1,
            isActive2: 1,
            detailsList: {},
            monthDay: '',
            Echarttext: '流量',
            PipetimeList: {},
            xData: [],
            yData1: [],
            series: [],
            yData2: []
        };
    },
    watch: {
        'isActive1'() {
            this.yData1 = []
            this.yData2 = []
            this.xData = []
            if (this.isActive1 == 1) {
                this.Echarttext = '流量'

                if (this.isActive2 == 1) {
                    this.getMsg11()
                }
                if (this.isActive2 == 2) {
                    this.getMsg12()
                }
                if (this.isActive2 == 3) {
                    this.getMsg13()
                }
            }
            if (this.isActive1 == 2) {
                this.Echarttext = '压力'

                if (this.isActive2 == 1) {
                    this.getMsg21()
                }
                if (this.isActive2 == 2) {
                    this.getMsg22()
                }
                if (this.isActive2 == 3) {
                    this.getMsg23()
                }
            }
        },
        'isActive2'() {
            this.yData1 = []
            this.yData2 = []
            this.xData = []
            if (this.isActive1 == 1) {
                if (this.isActive2 == 1) {
                    this.getMsg11()
                }
                if (this.isActive2 == 2) {
                    this.getMsg12()
                }
                if (this.isActive2 == 3) {
                    this.getMsg13()
                }
            }
            if (this.isActive1 == 2) {
                if (this.isActive2 == 1) {
                    this.getMsg21()
                }
                if (this.isActive2 == 2) {
                    this.getMsg22()
                }
                if (this.isActive2 == 3) {
                    this.getMsg23()
                }
            }
        }
    },
    mounted() {
        this.getDetailsList()
        this.getMap()
        this.getChart()
        this.getCountDays()
        this.getPipetimeList(() => {
            this.getMsg11()
        });
    },
    methods: {
        changeActive1(num) {
            this.isActive1 = num
        },
        changeActive2(num) {
            this.isActive2 = num
        },
        //供水管网实时详情
        getDetailsList() {
            this.$api.gongshuiguanwang.deatil({
                id: this.$route.query.id,
            }).then(res => {
                if (res.success) {
                    this.detailsList = res.data
                }
            });
        },
        //供水管网值时间列表
        getPipetimeList(callback) {
            this.$api.gongshuiguanwang.pipetime({
                id: this.$route.query.id,
            }).then(res => {
                if (res.success) {
                    this.PipetimeList = res.data
                    callback()
                }
            });
        },
        //地图
        getMap() {
            var map = new BMap.Map("dituContent"); //在百度地图容器中创建一个地图
            var point = new BMap.Point(this.$route.query.x, this.$route.query.y); //定义一个中心点坐标
            map.centerAndZoom(point, 16); //设定地图的中心点和坐标并将地图显示在地图容器中
        },
        toMap() {
            // console.log('aaa')
            this.$router.push({ path: '/bigmap', query: { x: this.$route.query.x, y: this.$route.query.y } })
        },
        //字符串截取
        getStr(str, a, b) {
            if (str != undefined) {
                return str.toString().substring(a, b)
            }
        },
        getCountDays() {
            var curDate = new Date();
            /* 获取当前月份 */
            var curMonth = curDate.getMonth();
            /*  生成实际的月份: 由于curMonth会比实际月份小1, 故需加1 */
            curDate.setMonth(curMonth + 1);
            /* 将日期设置为0, 这里为什么要这样设置, 我不知道原因, 这是从网上学来的 */
            curDate.setDate(0);
            /* 返回当月的天数 */
            this.monthDay = curDate.getDate();
        },
        getChart() {
            if (this.myChart != null && this.myChart != "" && this.myChart != undefined) {
                this.myChart.dispose();
            }
            this.myChart = echarts.init(this.$refs.echartContainer);
            this.myChart.setOption({
                title: {
                    text: this.Echarttext,
                    // subtext: '纯属虚构'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['实时', '昨日']
                },
                toolbox: {
                    show: true
                },
                calculable: true,
                grid: { // 控制图的大小，调整下面这些值就可以，
                    x: 40,
                    x2: 20,
                    y2: 30 // y2可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上
                },
                xAxis: [
                    {
                        type: 'category',
                        data: this.xData
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: this.series
            });
        },
        getMsg11() {
            for (let i in this.PipetimeList.listNow) {
                this.yData1.push(this.PipetimeList.listNow[i].flowInstantValue)
                // this.xData.push(this.getStr(this.PipetimeList.listNow[i].time, 11, 16))
            }
            for (let i in this.PipetimeList.listYesDay) {
                this.yData2.push(this.PipetimeList.listYesDay[i].flowInstantValue)
                this.xData.push(this.getStr(this.PipetimeList.listYesDay[i].time, 11, 16))
            }
            this.series = [
                {
                    name: '实时',
                    type: 'line',
                    data: this.yData1
                },
                {
                    name: '昨日',
                    type: 'line',
                    data: this.yData2
                }
            ]
            this.getChart()
        },
        getMsg12() {
            for (let i in this.PipetimeList.listWeek) {
                this.yData1.push(this.PipetimeList.listWeek[i].flowInstantValue)
            }
            for (let i = 1; i <= 7; i++) {
                this.xData.push(i)
            }
            this.series = [
                {
                    type: 'bar',
                    data: this.yData1
                }
            ]
            this.getChart()
        },
        getMsg13() {
            for (let i in this.PipetimeList.listMonth) {
                this.yData1.push(this.PipetimeList.listMonth[i].flowInstantValue)
            }
            for (let i = 1; i <= this.monthDay; i++) {
                this.xData.push(i)
            }
            this.series = [
                {
                    type: 'bar',
                    data: this.yData1
                }
            ]
            this.getChart()
        },
        getMsg21() {
            for (let i in this.PipetimeList.listNow) {
                this.yData1.push(this.PipetimeList.listNow[i].pressureValue)
                // this.xData.push(this.getStr(this.PipetimeList.listNow[i].time, 11, 16))
            }
            for (let i in this.PipetimeList.listYesDay) {
                this.yData2.push(this.PipetimeList.listYesDay[i].pressureValue)
                this.xData.push(this.getStr(this.PipetimeList.listYesDay[i].time, 11, 16))
            }
            this.series = [
                {
                    name: '实时',
                    type: 'line',
                    data: this.yData1
                },
                {
                    name: '昨日',
                    type: 'line',
                    data: this.yData2
                }
            ]
            this.getChart()
        },
        getMsg22() {
            for (let i in this.PipetimeList.listWeek) {
                this.yData1.push(this.PipetimeList.listWeek[i].pressureValue)
            }
            for (let i = 1; i <= 7; i++) {
                this.xData.push(i)
            }
            this.series = [
                {
                    type: 'line',
                    data: this.yData1
                }
            ]
            this.getChart()
        },
        getMsg23() {
            for (let i in this.PipetimeList.listMonth) {
                this.yData1.push(this.PipetimeList.listMonth[i].pressureValue)
            }
            for (let i = 1; i <= this.monthDay; i++) {
                this.xData.push(i)
            }
            this.series = [
                {
                    type: 'line',
                    data: this.yData1
                }
            ]
            this.getChart()
        },
    }
}
</script>

<style>
</style>
